<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">MeterGauge Chart</h1>
        <div class="entry">
            <p>MeterGaugeChart is created with a MeterGaugeChartModel.</p>
            <p:growl id="growl" showDetail="true" />

            <h3>Sample Meter Gauge</h3>
            <p:meterGaugeChart value="#{chartBean.meterGaugeModel}" style="width:400px;height:250px"/>
            
            <h3>Custom Meter Gauge</h3>
            <p:meterGaugeChart value="#{chartBean.meterGaugeModel}" showTickLabels="false" labelHeightAdjust="110" intervalOuterRadius="130" 
                               seriesColors="66cc66, 93b75f, E7E658, cc6666" style="width:400px;height:250px" />
            
            <h3>Source</h3>
            <p:tabView>
                <p:tab title="meterGaugeChart.xhtml">
                    <pre name="code" class="xml">
&lt;p:meterGaugeChart value="\#{chartBean.meterGaugeModel}" style="width:400px;height:250px"/&gt;

&lt;p:meterGaugeChart value="\#{chartBean.meterGaugeModel}" showTickLabels="false" labelHeightAdjust="110"
   intervalOuterRadius="130" seriesColors="66cc66, 93b75f, E7E658, cc6666" style="width:400px;height:250px" /&gt;
                    </pre>
                </p:tab>

                <p:tab title="ChartBean.java">
            <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import org.primefaces.model.chart.MeterGaugeChartModel;

public class ChartBean implements Serializable { 

    private MeterGaugeModel meterGaugeModel;

    public ChartBean() {
        createMeterGaugeModel();
    }

    private void createMeterGaugeModel() {

        List&lt;Number&gt; intervals = new ArrayList&lt;Number&gt;(){{
            add(20);
            add(50);
            add(120);
            add(220);
        }};

        meterGaugeModel = new MeterGaugeChartModel("km/h", 140, intervals);
    }
}
            </pre>
                </p:tab>
            </p:tabView>
        </div>
    </ui:define>
</ui:composition>
